<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工管理</title>
    <!--Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="js/popper.min.js"></script>
    <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
    <script src="js/bootstrap.min.js"></script>
    <!-- 部门管理css样式 -->
    <link rel="stylesheet" href="css/depart.css">
    <!-- 部门管理vue -->
    <script src="../js/vue.js"></script>
    <!-- 部门管理jquery -->
    <script src="../js/jquery3.6.js"></script>
</head>
<body>
<div class="box" id="box">
    <div class="container-fluid mt-3">
        <div class="row height1">
            <div class="col p-3 bg-dark text-white"><h5>员工管理</h5></div>
        </div>
        <div class="row">
            <div class="row mt-3 flex-md-grow-0">
                <div class="col lokman">
                    <label  class="form-label">员工名称：</label>
                    <input type="text" class="form-control" placeholder="名字" name="UserName" v-model="UserName">
                </div>
                <div class="col">
                    <label  class="form-label">部门名称：</label>
<!--                    <input type="text" class="form-control" placeholder="部门" name="DepartName" v-model="DepartName">-->
                    <select class="form-select" id="sel4" name="DepartName" v-model="DepartName" >
                        <option v-for="d in Department.list1">{{d.departName}}</option>
                    </select>
                </div>
                <div class="col">
                    <button type="button" class="btn btn-success" @click="search" style="margin-top: 32px">搜索</button>
                </div>
            </div>
            <div class="col mt-3 text-white">
                <div class="container mt-0 position-relative">
                    <div class="div-add">
                        <button type="button" class="btn btn-outline-dark btn-sm bilal-btn" data-bs-toggle="modal" data-bs-target="#myModal2">添加</button>
                    </div>
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>用户id</th>
                            <th>姓名</th>
                            <th>密码</th>
                            <th>角色</th>
                            <th>用户信息</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="d in Department.list.list" class="lh-48">
                            <td>{{d.userId}}</td>
                            <td>{{d.userName}}</td>
                            <td>{{d.passWord}}</td>
                            <td>{{d.roleName}}</td>
                            <td><span data-bs-toggle="modal" data-bs-target="#myModal3" @click="detailedUpd(d)">详细</span></td>
                            <td>
                                <button @click="shouUpd(d)" type="button" class="btn btn-outline-info btn-sm" data-bs-toggle="modal" data-bs-target="#myModal">修改</button>
                                <button @click="delDep(d)" type="button" class="btn btn-outline-danger btn-sm ms-lg-3">删除</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="container">
                <!--                    <h2>当前页页码状态</h2>-->
                <!--                    <p>当前页可以使用 .active 类来高亮显示：</p>-->
                <ul class="pagination m-auto width1 pagination-sm">
                    <li class="page-item" v-if="Department.list.page > 1"><a class="page-link" href="#" @click="toPage(Department.list.page-1)">上一页</a></li>
                    <li class="page-item disabled" v-else><a class="page-link" href="#">第一页</a></li>
                    <li class="page-item disabled" v-if="Department.list.page > 1"><a class="page-link" href="#">...</a></li>
                    <li class="page-item disabled"  v-if="Department.list.page == 1"><a class="page-link page0" href="#">{{Department.list.page-1}}</a></li>
                    <li class="page-item" v-else @click="toPage(Department.list.page-1)"><a class="page-link page0" href="#">{{Department.list.page-1}}</a></li>
                    <li class="page-item active"><a class="page-link page0" href="#">{{Department.list.page}}</a></li>
                    <li class="page-item disabled" v-if="Department.list.page == Department.list.total"><a class="page-link page0" href="#">{{Department.list.page+1}}</a></li>
                    <li class="page-item" v-else @click="toPage(Department.list.page+1)"><a class="page-link page0" href="#">{{Department.list.page+1}}</a></li>
                    <li class="page-item disabled" v-if="Department.list.page < Department.list.total"><a class="page-link" href="#">...</a></li>
                    <li class="page-item" v-if="Department.list.page < Department.list.total"><a class="page-link" href="#" @click="toPage(Department.list.page+1)">下一页</a></li>
                    <li class="page-item disabled" v-else><a class="page-link" href="#">最后一页</a></li>
                </ul>
            </div>

        </div>
    </div>
    <!-- 修改 -->
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- 修改头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">修改</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <!-- 修改内容 -->
                <div class="modal-body">
                    <form class="d-grid">
                        <div class="form-floating mb-2">
                            <div class="rasim-2"><img :src="'../../'+this.DepartmentUpd.headImg" alt="用户头像"></div>
                        </div>
                        <div class="form-floating mb-2 mt-2">
                            <input type="text" class="form-control" id="userName2" placeholder="Enter userName" name="userName" v-model="this.DepartmentUpd.userName">
                            <label for="userName2">员工名称</label>
                        </div>
                        <div class="form-floating mt-2 mb-2">
                            <input type="text" class="form-control" id="password2" placeholder="Enter password" name="password" v-model="this.DepartmentUpd.passWord">
                            <label for="password2">员工密码</label>
                        </div>
                        <div class="form-floating mb-2 mt-2">
                            <select class="form-select" id="sel22" name="sellist" v-model="this.DepartmentUpd.departId">
                                <option v-for="d in Department.list1" :value="d.departId">{{d.departName}}</option>
                            </select>
                            <label for="sel22" class="form-label">员工部门:</label>
                        </div>
                        <div class="form-check" style="position: relative">
                            <input type="radio" class="form-check-input" id="radio11" name="optradio" value="1" v-model="this.DepartmentUpd.gender">
                            <label class="form-check-label" for="radio11">男</label>
                            <div class="form-check orun">
                                <input type="radio" class="form-check-input" id="radio22" name="optradio" value="0" v-model="this.DepartmentUpd.gender">
                                <label class="form-check-label" for="radio22">女</label>
                            </div>
                        </div>
                        <div class="form-floating mb-2 mt-2">
                            <select class="form-select" id="se112" name="sellist" v-model="this.DepartmentUpd.roleId">
                                <option value="2">普通用户</option>
                                <option value="1">管理员</option>
                            </select>
                            <label for="se112" class="form-label">用户角色:</label>
                            <input type="hidden"  name="UserState" value="1">
                        </div>

                        <button type="button" class="btn btn-primary btn-block" @click="updDepartment">提交</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加 -->
    <div class="modal fade" id="myModal2">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- 添加头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">添加</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <!-- 添加内容 -->
                <div class="modal-body ">
                    <form action="../../administerServlet?flag=addDep" class="d-grid was-validated" method="post">
                        <div class="form-floating mb-2">
                            <div class="rasim-2" style="border:1px solid darkgray"><img src="images/text.png" alt="用户头像"></div>
                        </div>
                        <div class="form-floating mb-2 mt-2">
                            <input type="text" class="form-control" id="userName1" placeholder="Enter userName" name="userName" required>
                            <label for="userName1">员工名称</label>
                            <div class="invalid-feedback">请输员工名称！</div>
                        </div>
                        <div class="form-floating mb-2 mt-2">
                            <input type="password" class="form-control" id="password" placeholder="Enter departName" name="password" required>
                            <label for="password">密码</label>
                            <div class="invalid-feedback">请输密码！</div>
                        </div>
                        <div class="form-floating mb-2 mt-2">
                            <select class="form-select" id="se11" name="sellist" >
                                <option v-for="d in Department.list1" :value="d.departId">{{d.departName}}</option>
                            </select>
                            <label for="se11" class="form-label">部门:</label>
                        </div>
                        <div class="form-check" style="position: relative">
                            <input type="radio" class="form-check-input" id="radio1" name="optradio" value="1">
                            <label class="form-check-label" for="radio1">男</label>
                            <div class="form-check orun">
                                <input type="radio" class="form-check-input" id="radio2" name="optradio" value="2">
                                <label class="form-check-label" for="radio2">女</label>
                            </div>
                        </div>

                        <div class="form-floating mb-2 mt-2">
                            <select class="form-select" id="se111" name="RoleId" >
                                <option value="2">普通用户</option>
                                <option value="1">管理员</option>
                            </select>
                            <label for="se111" class="form-label">用户角色:</label>
                        </div>
                        <div class="form-floating mt-2 mb-2">
                            <input type="hidden"  name="UserState" value="1">
                            <input type="hidden"  name="upFile" value="images/text.png">
                        </div>
                        <button type="submit" class="btn btn-primary btn-block">提交</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- 详细 -->
    <div class="modal fade" id="myModal3">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- 详细头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">用户详细信息</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <!-- 详细内容 -->
                <div class="modal-body ">
                    <form action="../../administerServlet?flag=addDep" class="d-grid" method="post">
                        <div class="form-floating mb-2">
                            <div class="rasim-2"><img :src="'../../'+detailed.headImg" alt="用户头像1"></div>
                        </div>
                        <div class="form-floating mb-2">
                            <input type="text" class="form-control" id="DepartName" placeholder="Enter departName" name="sellist" v-model="detailed.departName">
                            <label for="DepartName">部门名称</label>
                        </div>
                        <div class="form-floating mt-2 mb-2">
                            <input type="text" class="form-control" id="UserName" placeholder="Enter CTel" name="CTel" v-model="detailed.userName">
                            <label for="UserName">员工姓名</label>
                        </div>
                        <div class="form-floating mt-2 mb-2">
                            <input type="text" class="form-control" id="Gender" placeholder="Enter CMTel" name="CMTel" v-model="this.gender">
                            <label for="Gender">员工性别</label>
                        </div>
                        <div class="form-floating mt-2 mb-2">
                            <input type="text" class="form-control" id="RoleName" placeholder="Enter faxes" name="faxes" v-model="detailed.roleName">
                            <label for="RoleName">用户角色</label>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="alert-div">
        <div class="container mt-3">
            <div class="alert alert-success alert-dismissible bilal1 fade ">
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                <strong>成功!</strong> 修改成功。
            </div>
        </div>
        <div class="alert alert-warning alert-dismissible bilal2 fade ">
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            <strong>警告!</strong> 删除成功。
        </div>
    </div>

</div>
</body>
<script>
    const vue = {
        data(){
            return{
                Department:selDepartment(1,5,this.DepartName,this.UserName),
                DepartmentUpd:{},    //需要改的员工对象
                UserName:null,      //搜索的用户名
                DepartName:null, //搜索的部门名字
                detailed:{},         //详细
                gender:null,        //部门
                headImg:null,        //上传头像
                UserIn:null             //用户角色


            }
        },
        methods:{
            //点击修改，要修改的一行的数据给DepartmentUpd
            shouUpd : function (s) {
                this.DepartmentUpd = s;

                this.UserIn = s.roleId == 1?"管理员":"普通用户";
                console.log(this.DepartmentUpd)
                // console.log(s)
            },
            //点提交，
            updDepartment: function (){
                //把修改的数据传递到后台
                $.ajax({
                    type: "post",
                    url: "../../administerServlet?flag=updDep",
                    data:this.DepartmentUpd, //把要修改的员工对象传递给data中
                    async:false,
                    success:function (data){
                        if (data == 1){
                            $(".bilal1").addClass("show");
                            window.setTimeout(function(){
                                $(".bilal1").removeClass("show");
                            },3000);//显示的时间
                        }
                    }
                })

            },
            delDep:function (s){
                this.DepartmentUpd = s;
                $.ajax({
                    type: "post",
                    url: "../../administerServlet?flag=delDep",
                    data:this.DepartmentUpd, //把要删除的部门对象的id传递给data中
                    async:false,
                    success:function (data){
                        console.log(data)
                        if (data == 1){
                            app.Department = selDepartment(1,5,this.DepartName,this.UserName)
                            $(".bilal2").addClass("show");
                            window.setTimeout(function(){
                                $(".bilal2").removeClass("show");
                            },3000);//显示的时间
                        }
                    }
                })
            },//详细
            detailedUpd:function (s){
                this.detailed = s;
                this.gender = s.gender === 1 ? "男" : "女";
            },
            toPage:function(page){
                this.Department = selDepartment(page,5,this.DepartName,this.UserName);
            },  //条件查询点击搜索
            search:function (){
                this.Department = selDepartment(1,5,this.DepartName,this.UserName);
            }

        }
    }
    let app = Vue.createApp(vue).mount("#box")
    /**
     * 查询员工信息
     */
    function selDepartment(page,limit,DepartName,UserName){
        let list;
        $.ajax({
            type:"post",
            url: "../../administerServlet?flag=selDep",
            data:{  //请求携带的查询条件 key：value
                "page":page,"limit":limit,"DepartName":DepartName,"UserName":UserName
            },
            dataType:"json",
            async:false,
            success:function (json){
                console.log(json)
                list = json
            }
        })
        return list;
    }

</script>
</html>
<script>
</script>